<template>
  <div class="app-container">
    <!--巡检记录-->
    <el-card class="dis">
      <el-form :inline="true" :model="searchData" class="formHeight">
        <el-form-item label="">
          <el-input v-model="searchData.keyword" placeholder="关键字：巡检标题" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--  列表  -->
    <el-card class="mt20">
      <el-table :data="tableData" size="mini">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="任务编号" prop="task_num" />
        <el-table-column align="center" label="计划编号" prop="spec_num" />
        <el-table-column align="center" label="工单编号" prop="work_num" />
        <el-table-column align="center" label="开始时间" prop="task_start" />
        <el-table-column align="center" label="结束时间" prop="task_end" />
        <el-table-column align="center" label="任务结果">
          <!-- 自定义模板，scope.row即为当前行 -->
          <template slot-scope="scope" align-center>
            <el-tag>{{ scope.row.task_result }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="执行班组/人" prop="user_name" width="100px"/>
        <el-table-column align="center" label="巡检标题" prop="task_title" width="100px"/>
        <el-table-column align="center" label="巡检内容" prop="task_content" />
        <el-table-column align="center" label="累计用时" prop="total_time" width="100px"/>
        <el-table-column align="center" label="任务附件" width="100px">
          <!-- 自定义模板，scope.row即为当前行 -->
          <template slot-scope="scope" align-center>
            <el-button type="text" @click="see(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <!-- 自定义模板，scope.row即为当前行 -->
          <template slot-scope="scope" align-center>
            <el-button size="mini" type="primary" @click="process(scope.row)">进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
<!--      <el-pagination-->
<!--        :current-page="searchData.offset"-->
<!--        :page-size="searchData.limit"-->
<!--        :total="total"-->
<!--        layout="total, prev, pager, next, jumper"-->
<!--        style="float: right;"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
      <pagination style='float: right;' v-show='total>0' :total='total' :page.sync='searchData.offset' :limit.sync='searchData.limit' @pagination='getList' />
    </el-card>
    <!-- 引入的详情弹窗组件 ref 为js中引用的名称 -->
    <inspection-task-process ref="inspectionTaskProcess" />
    <inspection-record-see ref="inspectionRecordSee" />
  </div>
</template>

<script>
import { spectionPlanTaskTacklist } from '@/api/operations'
import InspectionTaskProcess from '@/views/operations/inspection/record/components/process'
import InspectionRecordSee from '@/views/operations/inspection/record/components/see'

export default {
  name: 'index',
  components: { InspectionRecordSee, InspectionTaskProcess },
  data() {
    return {
      searchData: {
        task_type: '1',
        limit: 10,
        offset: 0,
        keyword: ''
      },
      tableData: [],
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      // 调用接口js中的接口方法
      spectionPlanTaskTacklist(this.searchData).then(res => {
        this.tableData = res.data.plans
        this.total = res.data.total
      })
    },
    // 翻页的时候执行的方法
    handleCurrentChange(val) {
      // 页码赋值
      this.searchData.offset = val
      // 调用查询方法
      this.getList()
    },
    // 查询
    search() {
      // 手动改变页面到第一页
      this.searchData.offset = 0
      // 调用查询方法
      this.getList()
    },
    // 查看进度
    process(row) {
      // 打开弹窗
      this.$refs.inspectionTaskProcess.open(row)
    },
    see(row) {
      this.$refs.inspectionRecordSee.open(row)
    }
  }
}
</script>

<style lang="scss" scoped>
  .dis{
    display: flex;
    justify-content: flex-start;
  }
.mt20 {
  margin-top: 20px;
}
.formHeight{
  height: 40px;
}
</style>
